import React from 'react'
import { Spin } from "antd"
import { useInfiniteScroll } from "ahooks"
import request from '../../api/request'
import Lazynew from '../../components/lazynew'
import moment from "moment"

import { FloatButton } from 'antd';
function Index() {
    const { data, loading, loadingMore, noMore } = useInfiniteScroll(
        async (currentData) => {
            const page = Math.floor((currentData?.list?.length || 0) / 6) + 1;
            const res = await request.get("/article/list", {
                params: {
                    page,
                    pageSize: 6
                }
            })

            return {
                list: res.data.rows,
                total: res.data.count
            }
        }, {
        target: document,
        isNoMore: (data) => (data?.list?.length || 0) >= (data?.total)
    }
    );

    return (
        <div>
            <div>
                {
                    loading && !data?.list ? (
                        <div>
                            <Spin size="large"></Spin>
                        </div>
                    ) : (
                        <div style={{ width: '100%', height: '300px' }}>
                            {
                                data?.list?.map((article: Ariticle) => (
                                    <div key={article.id}>
                                        <div style={{ float: 'left', marginRight: '800px' }}>
                                            <span>{article.title}</span>
                                            <div>
                                                <span>阅读量:{article.viewCount}</span>
                                                <span>{moment(article.createdAt).format('YYYY/MM/DD')}</span>
                                            </div>
                                            <div>
                                                {article.content}
                                            </div>
                                        </div>
                                        <div>
                                            <Lazynew
                                                src={`https://picsum.photos/200/300?random=${article.id}`}
                                                alt={article.title}

                                            >

                                            </Lazynew>
                                        </div>
                                    </div>
                                ))
                            }
                            {
                                loadingMore && (
                                    <div>
                                        <Spin size="small"></Spin>
                                        <span>加载十大大苏打倒萨范德萨发委屈委屈人</span>
                                    </div>
                                )
                            }
                            {
                                noMore && (
                                    <div>
                                        没有更多数据了
                                    </div>
                                )
                            }
                        </div>
                    )
                }
            </div>
            <div>
                <FloatButton.BackTop />
            </div>
        </div>
    )
}

export default Index
